<!DOCTYPE html>
<html>
<head>
    <title>设置个人资料</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="../js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myInfo.css"/>

    <script>
        //当页面加载完成
        $(function () {
            var userJsonStr = sessionStorage.getItem('user');
            var user = JSON.parse(userJsonStr);
            $(".info").renderValues(user)

            $(".myBg").css("background-image", "url('" + user.coverImgUrl + "')")

            var falg = true;
            //头像编辑按钮设置点击事件
            //步骤1:点击头像右下角和设置背景时,弹出选择文件窗口
            $("#headBtn").click(function () {
                falg = true;
                $("#upload").click();
            })
            //---------------------------------------------------------------
            //背景墙图片处理
            $("#coverBtn").click(function () {
                falg = false;
                //click传入参数,表示绑定点击事件
                //如果没有参数,表示调用点击事件响应函数
                //步骤2:选择需要修改的头像图片
                $("#upload").click();
            })

            //步骤3:提交选中的头像图片 到服务器
            $("#upload").change(function () {
                //input头像上传图片内容
                var img = $(this).val();
                if (img) {
                    $("#imageForm").ajaxSubmit(function (data) {
                        //步骤4:返回图片在服务器中的url地址,设置到页面头像img中
                        if (falg) {
                            $("#headImg").attr("src", data.url);
                            //设置头像路径,目标:当点击保存按钮,将头像随表单保存到数据库
                            $("input[name='headImgUrl']").val(data.url);
                        } else {
                            $(".myBg").css("background-image", "url('" + data.url + "')");
                            //设置背景路径,目标:当点击保存按钮,将背景随表单保存到数据库中
                            $("input[name='coverImgUrl']").val(data.url);
                        }
                    })
                }
            })

            $("#saveBtn").click(function () {
                //保存操作提交表单
                $("#infoForm").ajaxSubmit(function (data) {
                    //保存成功
                    if(data.success){
                        //同步更新缓存在页面用户信息
                        sessionStorage.setItem('user',JSON.stringify(data.result));
                        window.location.href="/mine/profiles.html";
                    }
                })
            })
        })

    </script>
</head>
<form action="/images" method="post" enctype="multipart/form-data" id="imageForm">
    <input type="file" name="file" style="display: none" id="upload"/>
</form>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1);">
                <span>取消</span>
            </a>
        </div>
        <div class="col">
            <span>设置个人资料</span>
        </div>
        <div class="col">
            <a href="javascript:;" id="saveBtn">
                <span>保存</span>
            </a>
        </div>
    </div>
</div>

<div class="container info">
    <div class="myBg">
        <img id="headImg" class="rounded-circle" render-src="headImgUrl"/>
        <div class="editHead" id="headBtn"><i class="fa fa-pencil-square fa-lg " aria-hidden="true"></i></div>
        <button class="btn btn-outline-light ibtn " id="coverBtn" ren>设置背景</button>
    </div>

    <form id="infoForm" method="post" action="/users">
        <input type="hidden" name="_method" value="PUT"/>
        <input type="hidden" name="id" render-value="id">
        <input type="hidden" name="headImgUrl" render-value="headImgUrl">
        <input type="hidden" name="coverImgUrl" render-value="coverImgUrl">

        <label>昵称</label><input type="text" name="nickName" class="form-control" render-value="nickName">
        <label>性别</label><select class="form-control" name="gender" render-value="gender">
        <option value="-1">保密</option>
        <option value="0">男</option>
        <option value="1">女</option>
    </select>
        <label>地区</label><input type="text" name="place" class="form-control" render-value="place">
        <label>签名</label><textarea name="sign" class="form-control" rows="5" render-value="sign"></textarea>
    </form>
</div>
</body>
</html>
